<template>
	<view>
		<view class="search" @click="tosearch()">
			<input type="text" placeholder="搜索菜谱或食材">
		</view>
		<view class="index" v-for="(i,j) in initList" :key="j">
			<text class="title">{{i.name}}</text>
			<view class="nostep"  v-if="j % 3 !== 0 && j!=0">
				<view class="index-img" @click="goFood(i.foodId)">
					<image :src="i.picture" alt="">
				</view>
				<view class="desc">
					<text class="watch">{{i.hits}}人浏览</text>
					<text class="like">{{i.favorites}}收藏</text>
				</view>
			</view>
			
			<view class="step" v-if="j % 3 == 0 || j ==0">
				<text class="descript" v-if="i.intro !=''">{{i.intro}}</text>
				<view class="step-img" v-for="(s,n) in i.steps"  @click="goFood(i.foodId)">
					<image :src="s.picture" alt="" >
				</view>
				<view class="desc">
					<text class="watch">{{i.hits}}人浏览</text>
					<text class="like">{{i.favorites}}收藏</text>
				</view>
			</view>
			
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				initList:[]
			}
		},
		methods: {
			tosearch(){
				uni.navigateTo({
				     url:`/pages/search/search`
				 })
			},
			getData(){
				uni.request({
				    url: 'https://appfly.cn/api/cookbookCommon/init',
				    success:  (res)=> {
						this.initList=res.data.data
				    }
				});
			},
			goFood(id){
				uni.navigateTo({
				     url:`/pages/food/food?id=${id}`
				 })
			}
		},
		mounted(){
			this.getData()
		}
	}


</script>

<style lang="scss">
	.search{
		border-radius: 8px;
		width: 93vw;
		padding: 0 12px;
		
		input{
			width: 100%;
			background-color: rgba(153, 153, 153, 0.2);
			font-size: 10px;
			border-radius: 8px;
		}
	}
	.index{
		width: 93vw;
		padding: 10px 12px;
		margin-top:20px;
		overflow-x: hidden;
		.title{
			font-weight: 700;
			font-size: 20px;
			margin-top: 30px;
		}
		.descript{
			width: 93vw;
			height: 40px;
			overflow: hidden;
			color: #999;
		}
		.nostep,
		.step{
			margin-bottom: 30px;
			margin-top: 20px;
		}
		.nostep{
			width: 93vw;
			.index-img{
				width: 93vw;
				height: 250px;
				border-radius: 8px;
				image{
					width: 100%;
					height: 100%;
					border-radius: 8px;
				}
			}
		}
		
		.step{
			width: 100vw;
			// height: 160px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.step-img{
				margin-top: 10px;
				flex: 0 0 30%;
				height: 80px;
				padding-right: 5px;
				border-radius: 8px;
				image{
					border-radius: 8px;
					width: 100%;
					height: 100%;
				}
			}
		}
		.desc{
			display: flex;
			margin-top: 10px;
			.like,
			.watch{
				color: #999;
			}
			
			.watch{
				margin-right: 150px;
			}
			
		}
	}
</style>